import React, { useState, useRef, useEffect } from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  ScrollView,
  Image,
  Alert,
  StyleSheet,
  PermissionsAndroid,
  Platform,
  Dimensions,
} from 'react-native';
import { launchCamera, launchImageLibrary, ImagePickerResponse, Asset } from 'react-native-image-picker';
import { uploadFileWithChunk, uploadManager } from '../utils/chunkUploader';

const { width } = Dimensions.get('window');

interface MediaFile {
  id: string;
  uri: string;
  name: string;
  size: number;
  type: string;
}

interface MediaUploaderProps {
  maxFiles?: number;
  onUploadComplete?: (files: MediaFile[]) => void;
}

const MediaUploader: React.FC<MediaUploaderProps> = ({ maxFiles = 5, onUploadComplete }) => {
  const [mediaFiles, setMediaFiles] = useState<MediaFile[]>([]);
  const [isUploading, setIsUploading] = useState(false);
  const [uploadProgress, setUploadProgress] = useState<{ [key: string]: number }>({});
  const [uploadStatus, setUploadStatus] = useState<{ [key: string]: string }>({});
  const scrollViewRef = useRef<ScrollView>(null);
  
  // 清理定时器和监控
  useEffect(() => {
    return () => {
      // 组件卸载时清理所有定时器
      console.log('🧹 清理MediaUploader组件');
    };
  }, []);

  // 清理上传状态
  const cleanupUploadStatus = (fileId: string) => {
    setUploadProgress(prev => {
      const newProgress = { ...prev };
      delete newProgress[fileId];
      return newProgress;
    });
    setUploadStatus(prev => {
      const newStatus = { ...prev };
      delete newStatus[fileId];
      return newStatus;
    });
  };

  // 请求Android权限
  const requestAndroidPermission = async (permission: any) => {
    try {
      const granted = await PermissionsAndroid.request(permission, {
        title: '权限请求',
        message: '应用需要访问您的相册和相机',
          buttonNeutral: '稍后询问',
          buttonNegative: '取消',
          buttonPositive: '确定',
      });
      return granted === PermissionsAndroid.RESULTS.GRANTED;
    } catch (err) {
      console.warn('权限请求失败:', err);
      return false;
    }
  };

  // 检查权限
  const checkPermissions = async () => {
    if (Platform.OS === 'android') {
      const cameraPermission = await requestAndroidPermission(PermissionsAndroid.PERMISSIONS.CAMERA);
      const storagePermission = await requestAndroidPermission(PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE);
      return cameraPermission && storagePermission;
    }
    return true;
  };

  // 选择媒体文件
  const handleSelectMedia = () => {
    Alert.alert(
      '选择媒体',
      '请选择媒体来源',
      [
        { text: '取消', style: 'cancel' },
        { 
          text: '拍照', 
          onPress: () => {
            console.log('📸 用户选择拍照');
            handleTakePhoto();
          }
        },
        { 
          text: '从相册选择', 
          onPress: () => {
            console.log('🖼️ 用户选择从相册选择');
            handleSelectFromGallery();
          }
        },
      ]
    );
  };

  // 拍照
  const handleTakePhoto = async () => {
    try {
      // 检查权限
      const hasPermission = await checkPermissions();
      if (!hasPermission) {
        Alert.alert('权限不足', '请授予相机和存储权限');
        return;
      }

      console.log('📸 启动相机...');
      const result: ImagePickerResponse = await launchCamera({
        mediaType: 'photo', // 修复：使用正确的mediaType
        quality: 0.8,
        includeBase64: false,
        saveToPhotos: false, // 不保存到相册
        maxWidth: 1920, // 限制最大宽度
        maxHeight: 1080, // 限制最大高度
      });
      
      console.log('📸 相机结果:', result);
      
      if (result.didCancel) {
        console.log('用户取消拍照');
        return;
      }
      
      if (result.errorCode) {
        console.error('相机错误:', result.errorCode, result.errorMessage);
        Alert.alert('拍照失败', result.errorMessage || '未知错误');
        return;
      }
      
      if (result.assets && result.assets.length > 0) {
        const asset = result.assets[0];
        if (asset.uri) {
          console.log('📸 拍照成功，开始处理:', asset.fileName);
          await addMediaFile(asset);
        }
      }
    } catch (error) {
      console.error('拍照失败:', error);
      Alert.alert('错误', '拍照失败，请重试');
    }
  };

  // 从相册选择
  const handleSelectFromGallery = async () => {
    try {
      // 检查权限
      const hasPermission = await checkPermissions();
      if (!hasPermission) {
        Alert.alert('权限不足', '请授予存储权限');
        return;
      }

      console.log('🖼️ 启动相册选择器...');
      const result: ImagePickerResponse = await launchImageLibrary({
        mediaType: 'photo', // 修复：使用正确的mediaType
        quality: 0.8,
        includeBase64: false,
        selectionLimit: maxFiles - mediaFiles.length,
        maxWidth: 1920, // 限制最大宽度
        maxHeight: 1080, // 限制最大高度
      });

      console.log('🖼️ 相册选择结果:', result);

      if (result.didCancel) {
        console.log('用户取消选择');
        return;
      }

      if (result.errorCode) {
        console.error('相册选择错误:', result.errorCode, result.errorMessage);
        Alert.alert('选择失败', result.errorMessage || '未知错误');
        return;
      }
      
      if (result.assets && result.assets.length > 0) {
        console.log(`🖼️ 选择了 ${result.assets.length} 个文件`);
        for (const asset of result.assets) {
          if (asset.uri) {
            await addMediaFile(asset);
          }
        }
      }
    } catch (error) {
      console.error('选择媒体失败:', error);
      Alert.alert('错误', '选择媒体失败，请重试');
    }
  };

  // 添加媒体文件
  const addMediaFile = async (asset: Asset) => {
    try {
      if (!asset.uri) {
        console.error('❌ 文件URI为空');
        Alert.alert('错误', '文件URI为空，无法处理');
        return;
      }

      if (!asset.fileName) {
        console.error('❌ 文件名为空');
        Alert.alert('错误', '文件名为空，无法处理');
        return;
      }

      // 验证文件大小
      const maxSize = 50 * 1024 * 1024; // 50MB
      if (asset.fileSize && asset.fileSize > maxSize) {
        console.error('❌ 文件过大:', asset.fileSize);
        Alert.alert('错误', '文件过大，请选择小于50MB的文件');
        return;
      }

      console.log('📁 处理文件:', {
        fileName: asset.fileName,
        fileSize: asset.fileSize,
        type: asset.type,
        uri: asset.uri?.substring(0, 50) + '...'
      });

      const mediaFile: MediaFile = {
        id: `media_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
        uri: asset.uri,
        name: asset.fileName,
        size: asset.fileSize || 0,
        type: asset.type || 'application/octet-stream',
      };

      setMediaFiles(prev => [...prev, mediaFile]);
      console.log('✅ 文件添加成功，开始真实上传到后端');
      
      // 使用真实上传功能
      await handleRealUploadWithProgress(mediaFile);
      
    } catch (error) {
      console.error('❌ 添加媒体文件失败:', error);
      Alert.alert('错误', '添加文件失败，请重试');
    }
  };

  // 自动上传文件
  const handleAutoUpload = async (file: MediaFile) => {
    try {
      console.log('🚀 开始自动上传文件:', file.name);
      
      // 设置上传状态
      setIsUploading(true);
      setUploadStatus(prev => ({ ...prev, [file.id]: 'uploading' }));
      
      // 添加超时控制
      const uploadTimeout = setTimeout(() => {
        console.log('⏰ 上传超时，取消上传:', file.name);
        setUploadStatus(prev => ({ ...prev, [file.id]: 'failed' }));
        setIsUploading(false);
      }, 60000); // 60秒超时
      
      console.log('📤 调用上传管理器...');
      
      // 使用新的上传管理器
      const result = await uploadFileWithChunk({
        file: {
          uri: file.uri,
          name: file.name,
          size: file.size,
          type: file.type,
        },
        onProgress: (percent: number) => {
          try {
            console.log(`📊 文件 ${file.name} 进度: ${percent}%`);
            setUploadProgress(prev => ({ ...prev, [file.id]: percent }));
            
            // 当进度达到100%时，检查上传状态
            if (percent >= 100) {
              // 延迟一点时间确保状态已更新
              setTimeout(() => {
                try {
                  const uploadStatus = uploadManager.getUploadStatus(file.id);
                  if (uploadStatus && uploadStatus.status === 'completed') {
                    setUploadStatus(prev => ({ ...prev, [file.id]: 'completed' }));
                    console.log('✅ 状态同步完成:', file.name);
                  }
                } catch (error) {
                  console.error('❌ 状态同步失败:', error);
                }
              }, 1000);
            }
          } catch (error) {
            console.error('❌ 进度更新失败:', error);
          }
        },
      });

      // 清除超时
      clearTimeout(uploadTimeout);
      
      console.log('📤 上传结果:', result);
      
      if (result.success) {
        if (result.message === '文件上传成功') {
          setUploadStatus(prev => ({ ...prev, [file.id]: 'completed' }));
          setUploadProgress(prev => ({ ...prev, [file.id]: 100 }));
          console.log('✅ 上传成功:', file.name);
          
          // 通知父组件
          onUploadComplete?.(mediaFiles);
        } else if (result.message === '文件已加入上传队列') {
          console.log('📋 文件已加入上传队列:', file.name);
          // 文件已加入队列，状态会通过进度回调更新
          
          // 启动状态监控
          startStatusMonitoring(file.id);
        }
      } else {
        console.error('❌ 上传失败:', result.message);
        setUploadStatus(prev => ({ ...prev, [file.id]: 'failed' }));
        Alert.alert('上传失败', result.message || '文件上传失败');
      }
      
    } catch (error: any) {
      console.error('❌ 自动上传失败:', error);
      setUploadStatus(prev => ({ ...prev, [file.id]: 'failed' }));
      
      Alert.alert('上传失败', error.message || '文件上传失败');
    } finally {
      setIsUploading(false);
    }
  };

  // 启动状态监控
  const startStatusMonitoring = (fileId: string) => {
    let retryCount = 0;
    const maxRetries = 30; // 最多监控30次（30秒）
    
    const checkStatus = () => {
      try {
        // 检查重试次数
        if (retryCount >= maxRetries) {
          console.log('⏰ 状态监控超时，停止监控:', fileId);
          setUploadStatus(prev => ({ ...prev, [fileId]: 'failed' }));
          return;
        }
        
        retryCount++;
        
        const uploadStatus = uploadManager.getUploadStatus(fileId);
        if (uploadStatus) {
          if (uploadStatus.status === 'completed') {
            setUploadStatus(prev => ({ ...prev, [fileId]: 'completed' }));
            setUploadProgress(prev => ({ ...prev, [fileId]: 100 }));
            console.log('✅ 状态监控发现完成:', fileId);
            return;
          } else if (uploadStatus.status === 'failed') {
            setUploadStatus(prev => ({ ...prev, [fileId]: 'failed' }));
            console.log('❌ 状态监控发现失败:', fileId);
            return;
          }
        }
        
        // 继续监控，但增加间隔时间
        const interval = Math.min(1000 + retryCount * 100, 5000); // 1-5秒间隔
        setTimeout(checkStatus, interval);
        
      } catch (error) {
        console.error('❌ 状态监控错误:', error);
        setUploadStatus(prev => ({ ...prev, [fileId]: 'failed' }));
      }
    };
    
    // 延迟开始监控
    setTimeout(checkStatus, 1000);
  };

  // 手动上传文件
  const handleManualUpload = async (file: MediaFile) => {
    if (uploadStatus[file.id] === 'uploading') {
      Alert.alert('提示', '文件正在上传中');
      return;
    }

    if (uploadStatus[file.id] === 'completed') {
      Alert.alert('提示', '文件已上传完成');
      return;
    }

    await handleAutoUpload(file);
  };

  // 暂停上传
  const handlePauseUpload = (fileId: string) => {
    uploadManager.pauseUpload(fileId);
    setUploadStatus(prev => ({ ...prev, [fileId]: 'paused' }));
  };

  // 恢复上传
  const handleResumeUpload = (fileId: string) => {
    uploadManager.resumeUpload(fileId);
    setUploadStatus(prev => ({ ...prev, [fileId]: 'pending' }));
  };

  // 取消上传
  const handleCancelUpload = (fileId: string) => {
    uploadManager.cancelUpload(fileId);
    setUploadStatus(prev => ({ ...prev, [fileId]: 'failed' }));
  };

  // 删除文件
  const handleRemoveFile = (fileId: string) => {
    Alert.alert('确认删除', '确定要删除这个文件吗？', [
      { text: '取消', style: 'cancel' },
      {
        text: '删除',
        style: 'destructive',
        onPress: () => {
          try {
            // 如果正在上传，先取消
            if (uploadStatus[fileId] === 'uploading') {
              uploadManager.cancelUpload(fileId);
            }
            
            // 从文件列表中移除
            setMediaFiles(prev => prev.filter(f => f.id !== fileId));
            
            // 清理上传状态
            cleanupUploadStatus(fileId);
            
            console.log('✅ 文件删除成功:', fileId);
          } catch (error) {
            console.error('❌ 删除文件失败:', error);
            Alert.alert('错误', '删除文件失败，请重试');
          }
        },
      },
    ]);
  };

  // 获取状态显示文本
  const getStatusText = (fileId: string) => {
    const status = uploadStatus[fileId];
    switch (status) {
      case 'uploading':
        return '上传中...';
      case 'completed':
        return '已完成';
      case 'failed':
        return '上传失败';
      case 'paused':
        return '已暂停';
      case 'pending':
        return '等待中';
      default:
        return '未开始';
    }
  };

  // 获取状态颜色
  const getStatusColor = (fileId: string) => {
    const status = uploadStatus[fileId];
    switch (status) {
      case 'uploading':
        return '#007AFF';
      case 'completed':
        return '#34C759';
      case 'failed':
        return '#FF3B30';
      case 'paused':
        return '#FF9500';
      case 'pending':
        return '#8E8E93';
      default:
        return '#8E8E93';
    }
  };

  // 简单测试上传（用于调试）
  const handleSimpleUpload = async (file: MediaFile) => {
    try {
      console.log('🧪 开始简单测试上传:', file.name);
      
      setUploadStatus(prev => ({ ...prev, [file.id]: 'uploading' }));
      
      // 模拟进度
      let progress = 0;
      const progressInterval = setInterval(() => {
        progress += 10;
        if (progress <= 100) {
          setUploadProgress(prev => ({ ...prev, [file.id]: progress }));
          console.log(`📊 模拟进度: ${progress}%`);
        }
        
        if (progress >= 100) {
          clearInterval(progressInterval);
          setUploadStatus(prev => ({ ...prev, [file.id]: 'completed' }));
          console.log('✅ 简单上传完成');
        }
      }, 500);
      
      // 5秒后完成
      setTimeout(() => {
        clearInterval(progressInterval);
        setUploadStatus(prev => ({ ...prev, [file.id]: 'completed' }));
        setUploadProgress(prev => ({ ...prev, [file.id]: 100 }));
        console.log('✅ 简单上传完成（5秒后）');
      }, 5000);
      
    } catch (error) {
      console.error('❌ 简单上传失败:', error);
      setUploadStatus(prev => ({ ...prev, [file.id]: 'failed' }));
    }
  };

  // 带进度的真实上传功能
  const handleRealUploadWithProgress = async (file: MediaFile) => {
    try {
      console.log('🚀 开始带进度的真实上传到后端:', file.name);
      
      setUploadStatus(prev => ({ ...prev, [file.id]: 'uploading' }));
      
      // 启动进度模拟器
      let progress = 0;
      const progressInterval = setInterval(() => {
        if (progress < 90) {
          progress += Math.random() * 15;
          progress = Math.min(progress, 90);
          setUploadProgress(prev => ({ ...prev, [file.id]: progress }));
          console.log(`📊 上传进度: ${Math.round(progress)}%`);
        }
      }, 300);
      
      // 创建FormData
      const formData = new FormData();
      
      // Android文件对象格式
      const fileObject = {
        uri: file.uri,
        type: file.type || 'application/octet-stream',
        name: file.name,
      };
      
      console.log('📁 文件对象:', fileObject);
      
      formData.append('file', fileObject as any);
      formData.append('fileName', file.name);
      formData.append('fileSize', file.size.toString());
      
      console.log('📤 准备发送到后端:', {
        fileName: file.name,
        fileSize: file.size,
        type: file.type,
        serverUrl: 'http://192.168.192.147:3000'
      });
      
      console.log('📤 发送请求开始...');
      const startTime = Date.now();
      
      // 发送到后端 - 不设置Content-Type，让浏览器自动设置
      const response = await fetch('http://192.168.192.147:3000/sow/upload/simple', {
        method: 'POST',
        body: formData,
        // 不设置Content-Type，让浏览器自动设置multipart/form-data的boundary
      });
      
      const endTime = Date.now();
      console.log(`📤 请求发送完成，耗时: ${endTime - startTime}ms`);
      
      console.log('📥 后端响应状态:', response.status);
      console.log('📥 响应头:', Object.fromEntries(response.headers.entries()));
      
      // 清除进度模拟器
      clearInterval(progressInterval);
      
      console.log('📥 后端响应状态:', response.status);
      
      if (response.ok) {
        const result = await response.json();
        console.log('📥 后端响应数据:', result);
        
        if (result.success) {
          // 上传成功，设置100%进度
          setUploadProgress(prev => ({ ...prev, [file.id]: 100 }));
          setUploadStatus(prev => ({ ...prev, [file.id]: 'completed' }));
          console.log('✅ 真实上传成功:', file.name);
          
          // 通知父组件
          onUploadComplete?.(mediaFiles);
        } else {
          throw new Error(result.message || '上传失败');
        }
      } else {
        throw new Error(`HTTP错误: ${response.status}`);
      }
      
    } catch (error: any) {
      console.error('❌ 真实上传失败:', error);
      setUploadStatus(prev => ({ ...prev, [file.id]: 'failed' }));
      Alert.alert('上传失败', `上传失败: ${error.message}`);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>媒体文件</Text>
      
      {/* 文件列表 */}
      <ScrollView 
        ref={scrollViewRef}
        horizontal 
        showsHorizontalScrollIndicator={false}
        style={styles.fileList}
      >
        {mediaFiles.map((file) => (
          <View key={file.id} style={styles.fileItem}>
            {/* 文件预览 */}
            <View style={styles.filePreview}>
              {file.type.startsWith('image/') ? (
                <Image source={{ uri: file.uri }} style={styles.imagePreview} />
              ) : (
                <View style={styles.videoPreview}>
                  <Text style={styles.videoIcon}>🎥</Text>
      </View>
              )}
              
              {/* 删除按钮 */}
      <TouchableOpacity
        style={styles.removeButton}
                onPress={() => handleRemoveFile(file.id)}
      >
        <Text style={styles.removeButtonText}>×</Text>
      </TouchableOpacity>
            </View>

            {/* 文件信息 */}
            <Text style={styles.fileName} numberOfLines={1}>
              {file.name}
            </Text>
            <Text style={styles.fileSize}>
              {(file.size / 1024 / 1024).toFixed(2)} MB
            </Text>
            <Text style={styles.fileType}>
              {file.type.startsWith('image/') ? '图片' : '视频'}
            </Text>

            {/* 上传状态 */}
            <Text style={[styles.statusText, { color: getStatusColor(file.id) }]}>
              {getStatusText(file.id)}
            </Text>

            {/* 进度条 - 只在非完成状态显示 */}
            {uploadStatus[file.id] !== 'completed' && uploadStatus[file.id] !== 'failed' && (
              <View style={styles.progressContainer}>
                <View style={styles.progressBar}>
                  <View 
                    style={[
                      styles.progressFill, 
                      { width: `${uploadProgress[file.id] || 0}%` }
                    ]} 
                  />
                </View>
                <Text style={styles.progressText}>
                  {Math.round(uploadProgress[file.id] || 0)}%
                </Text>
              </View>
            )}

            {/* 操作按钮 */}
            <View style={styles.actionButtons}>
              {/* 上传中 - 显示暂停按钮 */}
              {uploadStatus[file.id] === 'uploading' && (
                <TouchableOpacity
                  style={[styles.actionButton, styles.pauseButton]}
                  onPress={() => handlePauseUpload(file.id)}
                >
                  <Text style={styles.actionButtonText}>暂停</Text>
                </TouchableOpacity>
              )}
              
              {/* 暂停状态 - 显示继续按钮 */}
              {uploadStatus[file.id] === 'paused' && (
                <TouchableOpacity
                  style={[styles.actionButton, styles.resumeButton]}
                  onPress={() => handleResumeUpload(file.id)}
                >
                  <Text style={styles.actionButtonText}>继续</Text>
                </TouchableOpacity>
              )}
              
              {/* 失败状态 - 显示重试按钮 */}
              {uploadStatus[file.id] === 'failed' && (
                <TouchableOpacity
                  style={[styles.actionButton, styles.retryButton]}
                  onPress={() => handleManualUpload(file)}
                >
                  <Text style={styles.actionButtonText}>重试</Text>
                </TouchableOpacity>
              )}
              
              {/* 等待状态 - 显示上传按钮 */}
              {uploadStatus[file.id] === 'pending' && (
      <TouchableOpacity
                  style={[styles.actionButton, styles.uploadButton]}
                  onPress={() => handleManualUpload(file)}
      >
                  <Text style={styles.actionButtonText}>上传</Text>
      </TouchableOpacity>
              )}
              
              {/* 完成状态 - 显示完成标记 */}
              {uploadStatus[file.id] === 'completed' && (
                <View style={[styles.actionButton, styles.completedButton]}>
                  <Text style={styles.actionButtonText}>✅</Text>
        </View>
      )}
    </View>
      </View>
        ))}

        {/* 添加按钮 */}
        {mediaFiles.length < maxFiles && (
          <TouchableOpacity style={styles.addButton} onPress={handleSelectMedia}>
            <Text style={styles.addButtonText}>+</Text>
            <Text style={styles.addButtonLabel}>添加</Text>
      </TouchableOpacity>
        )}
      </ScrollView>

      {/* 上传统计 */}
      {mediaFiles.length > 0 && (
        <View style={styles.uploadStats}>
          <Text style={styles.statsText}>
            总计: {mediaFiles.length} 个文件
          </Text>
          <Text style={styles.statsText}>
            已完成: {mediaFiles.filter(f => uploadStatus[f.id] === 'completed').length} 个
          </Text>
          <Text style={styles.statsText}>
            上传中: {mediaFiles.filter(f => uploadStatus[f.id] === 'uploading').length} 个
          </Text>
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 16,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 16,
    color: '#333',
  },
  fileList: {
    flexDirection: 'row',
    marginBottom: 16,
  },
  fileItem: {
    width: 120,
    marginRight: 12,
    alignItems: 'center',
  },
  filePreview: {
    width: 80,
    height: 80,
    borderRadius: 8,
    backgroundColor: '#f0f0f0',
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 8,
    position: 'relative',
  },
  imagePreview: {
    width: 80,
    height: 80,
    borderRadius: 8,
  },
  videoPreview: {
    width: 80,
    height: 80,
    borderRadius: 8,
    backgroundColor: '#000',
    justifyContent: 'center',
    alignItems: 'center',
  },
  videoIcon: {
    fontSize: 24,
    color: '#fff',
  },
  removeButton: {
    position: 'absolute',
    top: -8,
    right: -8,
    width: 20,
    height: 20,
    borderRadius: 10,
    backgroundColor: '#FF3B30',
    justifyContent: 'center',
    alignItems: 'center',
  },
  removeButtonText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: 'bold',
  },
  fileName: {
    fontSize: 12,
    color: '#333',
    textAlign: 'center',
    marginBottom: 4,
    width: '100%',
  },
  fileSize: {
    fontSize: 10,
    color: '#666',
    marginBottom: 2,
  },
  fileType: {
    fontSize: 10,
    color: '#666',
    marginBottom: 4,
  },
  statusText: {
    fontSize: 10,
    fontWeight: 'bold',
    marginBottom: 8,
  },
  progressContainer: {
    width: '100%',
    marginBottom: 8,
  },
  progressBar: {
    width: '100%',
    height: 4,
    backgroundColor: '#f0f0f0',
    borderRadius: 2,
    marginBottom: 4,
  },
  progressFill: {
    height: 4,
    backgroundColor: '#007AFF',
    borderRadius: 2,
  },
  progressText: {
    fontSize: 10,
    color: '#666',
    textAlign: 'center',
  },
  actionButtons: {
    width: '100%',
  },
  actionButton: {
    paddingVertical: 4,
    paddingHorizontal: 8,
    borderRadius: 4,
    marginBottom: 4,
  },
  uploadButton: {
    backgroundColor: '#007AFF',
  },
  pauseButton: {
    backgroundColor: '#FF9500',
  },
  resumeButton: {
    backgroundColor: '#34C759',
  },
  retryButton: {
    backgroundColor: '#FF3B30',
  },
  actionButtonText: {
    color: '#fff',
    fontSize: 10,
    textAlign: 'center',
    fontWeight: 'bold',
  },
  addButton: {
    width: 80,
    height: 80,
    borderRadius: 8,
    backgroundColor: '#f0f0f0',
    justifyContent: 'center',
    alignItems: 'center',
    borderWidth: 2,
    borderColor: '#ddd',
    borderStyle: 'dashed',
  },
  addButtonText: {
    fontSize: 24,
    color: '#666',
    marginBottom: 4,
  },
  addButtonLabel: {
    fontSize: 12,
    color: '#666',
  },
  uploadStats: {
    padding: 12,
    backgroundColor: '#f8f8f8',
    borderRadius: 8,
  },
  statsText: {
    fontSize: 12,
    color: '#666',
    marginBottom: 4,
  },
  completedButton: {
    backgroundColor: '#34C759',
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default MediaUploader; 